import { register } from "@antv/x6-vue-shape";

// import { nodeShapeList1 } from "@/components/flower/antv"
// import { getNodeShapeList1 } from "../antv.vue"

const requireComponent = require.context('./components', true, /\w+\.vue$/)

// Vue.$root.Bus.$on('getNodeShapeList1', (value) => {
//   console.log(value)
// })
// nodeShapeList1=[]
requireComponent.keys().map(fileName => {
  const com = requireComponent(fileName).default;
  register({
    shape: "custom-vue-node",
    component: {
        render: (h) => h(com, {}),
    },
  });
})

// 基本设置
export const configSetting = (Shape) => {
  return {
    grid: true,
    with: 1920,
    height: 630,
    autoResize: true,
    translating: { restrict: true },
    panning: {
      enabled: true,
      modifiers: 'shift'
    },
    mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
      modifiers: 'ctrl',
      minScale: 0.5,
      maxScale: 3,
    },
    connecting: {
      router: {
        name: 'manhattan',
        args: {
          padding: 1,
        },
      },
      connector: {
        name: 'rounded',
        args: {
          radius: 8,
        },
      },
      anchor: 'center',
      connectionPoint: 'anchor',
      allowBlank: false,
      snap: {
        radius: 20,
      },
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              // stroke: '#D7DFFD',
              strokeWidth: 2,
              // targetMarker: null,
            },
          },
          zIndex: 0,
        });
      },
      validateConnection({ targetMagnet }) {
        return !!targetMagnet;
      },
    },
    onToolItemCreated({ tool }) {
      const handle = tool;
      const options = handle.options;
      if (options && options.index % 2 === 1) {
        tool.setAttrs({ fill: 'red' });
      }
    },
    highlighting: {
      magnetAdsorbed: {
        name: 'stroke',
        args: {
          attrs: {
            fill: '#5F95FF',
            stroke: '#5F95FF',
          },
        },
      },
    }
  };
};

// 展示基本设置
export const configSettingShow = (Shape) => {
  return {
    grid: false,
    autoResize: true,
    translating: { restrict: false },
    panning: true,
    mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
      modifiers: 'ctrl',
      minScale: 0.5,
      maxScale: 3,
    },
    connecting: {
      router: {
        name: 'manhattan',
        args: {
          padding: 1,
        },
      },
      connector: {
        name: 'rounded',
        args: {
          radius: 8,
        },
      },
      anchor: 'center',
      connectionPoint: 'anchor',
      allowBlank: false,
      snap: {
        radius: 20,
      },
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#D7DFFD',
              strokeWidth: 2,
              targetMarker: null,
            },
          },
          zIndex: 0,
        });
      },
      validateConnection({ targetMagnet }) {
        return !!targetMagnet;
      },
    },
    onToolItemCreated({ tool }) {
      const handle = tool;
      const options = handle.options;
      if (options && options.index % 2 === 1) {
        tool.setAttrs({ fill: 'red' });
      }
    },
    highlighting: {
      magnetAdsorbed: {
        name: 'stroke',
        args: {
          attrs: {
            fill: '#5F95FF',
            stroke: '#5F95FF',
          },
        },
      },
    }
  };
};
// export const nodeShapeList1 = [
//     {
//       label: '模型1',
//       data: {
//         id:'1',
//         type: 'mode',
//         url:'www.xxxx.com',
//         reqType:'post',
//         reqParam:'{name:"zhangsan",age:"12"}',
//       },
//       shape: 'rect',
//       width: 100,
//       height: 50,
//       attrs: {
//         label: {
//           text: '模型1',
//           fontSize: 16,
//           fill: '#333',
//         },
//         body: {
//           fill: '#fff',
//           stroke: '#333',
//         },
//       },
//     },
//     {
//       label: '模型2',
//       data: {
//         id:'2',
//         type: 'mode',
//         url:'www.xxxx.com',
//         reqType:'get',
//         reqParam:'{"name":"zhangsan","age":"12"}',
//       },
//       shape: 'rect',
//       width: 100,
//       height: 50,
//       attrs: {
//         label: {
//           text: '模型2',
//           fontSize: 16,
//           fill: '#333',
//         },
//         body: {
//           fill: '#fff',
//           stroke: '#333',
//         },
//       },
//     },
//     {
//       label: '模型3',
//       data: {
//         id:'2',
//         type: 'mode',
//         url:'www.xxxx.com',
//         reqType:'get',
//         reqParam:'{"name":"zhangsan","age":"12"}',
//       },
//       shape: 'rect',
//       width: 100,
//       height: 50,
//       attrs: {
//         label: {
//           text: '模型3',
//           fontSize: 16,
//           fill: '#333',
//         },
//         body: {
//           fill: '#fff',
//           stroke: '#333',
//         },
//       },
//     },
//   ];
const nodeShapeList1 = [
  {
      "attrs": {
          "label": {
              "text": "罪名预测2",
              "fontSize": 16,
              "fill": "#333"
          },
          "body": {
              "fill": "#fff",
              "stroke": "#333"
          }
      },
      "data": {
          "id": 1,
          "url": "http://192.168.2.88:9400/crime_predict",
          "reqType": "post",
          "reqParam": {
              "text": "参数名1，表示输入犯罪事实"
          }
      },
      "height": 50,
      "width": 100,
      "shape": "rect",
      "label": "罪名预测2"
  },
  {
      "attrs": {
          "label": {
              "text": "罪名预测",
              "fontSize": 16,
              "fill": "#333"
          },
          "body": {
              "fill": "#fff",
              "stroke": "#333"
          }
      },
      "data": {
          "id": 2,
          "url": "http://192.168.2.88:9400/crime_predict",
          "reqType": "post",
          "reqParam": {
              "text": "post请求参数名1，表示输入犯罪事实"
          }
      },
      "height": 50,
      "width": 100,
      "shape": "rect",
      "label": "罪名预测"
  },
  // {
  //     "attrs": {
  //         "label": {
  //             "text": "罪名预测",
  //             "fontSize": 16,
  //             "fill": "#333"
  //         },
  //         "body": {
  //             "fill": "#fff",
  //             "stroke": "#333"
  //         }
  //     },
  //     "data": {
  //         "id": 3,
  //         "url": "http://192.168.2.88:9400/crime_predict",
  //         "reqType": "post",
  //         "reqParam": {
  //             "text": "post请求参数名1，表示输入犯罪事实"
  //         }
  //     },
  //     "height": 50,
  //     "width": 100,
  //     "shape": "rect",
  //     "label": "罪名预测"
  // },
  // {
  //     "attrs": {
  //         "label": {
  //             "text": "罪名预测",
  //             "fontSize": 16,
  //             "fill": "#333"
  //         },
  //         "body": {
  //             "fill": "#fff",
  //             "stroke": "#333"
  //         }
  //     },
  //     "data": {
  //         "id": 4,
  //         "url": "http://192.168.2.88:9400/crime_predict",
  //         "reqType": "post",
  //         "reqParam": {
  //             "text": "post请求参数名，表示输入犯罪事实"
  //         }
  //     },
  //     "height": 50,
  //     "width": 100,
  //     "shape": "rect",
  //     "label": "罪名预测"
  // }
]

export const nodeShapeList2 = [
    
    {
      label: '数据集1',
      data: {
        id:'3',
        type: 'data',
        dataDesc:'这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介',
      },
      shape: 'rect',
      width: 100,
      height: 50,
      attrs: {
        label: {
          text: '数据集1',
          fontSize: 16,
          fill: '#333',
        },
        body: {
          fill: '#fff',
          stroke: '#333',
        },
      },
    },
    {
      label: '数据集2',
      data: {
        id:'4',
        type: 'data',
        dataDesc:'这是数据集简介11111这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是1111111数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据11111111集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介这是数据集简介',
      },
      shape: 'rect',
      width: 100,
      height: 50,
      attrs: {
        label: {
          text: '数据集2',
          fontSize: 16,
          fill: '#333',
        },
        body: {
          fill: '#fff',
          stroke: '#333',
        },
      },
    },
    
  ];
export const configNodeShape1 = (id) => {
  if (id) {
    const obj = nodeShapeList1.find((item) => {
      return Number(item.data.id) === id;
    });
    return obj || nodeShapeList1;
  }
  return nodeShapeList1;
};
export const configNodeShape2 = (id) => {
  
  if (id) {
    const obj = nodeShapeList2.find((item) => {
      return item.data.id === id;
    });
    return obj || nodeShapeList2;
  }
  return nodeShapeList2;
};

// 节点连接装设置
export const configNodePorts = () => {
  return {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
    },
    items: [
      {
        group: 'top',
      },
      {
        group: 'right',
      },
      {
        group: 'bottom',
      },
      {
        group: 'left',
      },
    ],
  };
};

// 连线 label 设置
export const configEdgeLabel = (labelText, fontColor, fill, stroke) => {
  if (!labelText)
    return {
      attrs: { labelText: { text: '' }, labelBody: { fill: '', stroke: '' } },
    };
  return {
    markup: [
      {
        tagName: 'rect',
        selector: 'labelBody',
      },
      {
        tagName: 'text',
        selector: 'labelText',
      },
    ],
    attrs: {
      labelText: {
        text: labelText || '',
        fill: fontColor || '#333',
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
      },
      labelBody: {
        ref: 'labelText',
        refX: -8,
        refY: -5,
        refWidth: '100%',
        refHeight: '100%',
        refWidth2: 16,
        refHeight2: 10,
        stroke: stroke || '#555',
        fill: fill || '#fff',
        strokeWidth: 2,
        rx: 5,
        ry: 5,
      },
    },
  };
};

// 键盘事件
export const graphBindKey = (graph) => {
  graph.bindKey(['meta+c', 'ctrl+c'], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.copy(cells);
    }
    return false;
  });
  graph.bindKey(['meta+x', 'ctrl+x'], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.cut(cells);
    }
    return false;
  });
  graph.bindKey(['meta+v', 'ctrl+v'], () => {
    if (!graph.isClipboardEmpty()) {
      const cells = graph.paste({ offset: 32 });
      graph.cleanSelection();
      graph.select(cells);
    }
    return false;
  });
  //undo redo
  graph.bindKey(['meta+z', 'ctrl+z'], () => {
    if (graph.canUndo()) {
      graph.undo();
    }
    return false;
  });
  graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
    if (graph.canRedo()) {
      graph.redo();
    }
    return false;
  });
  // select all
  graph.bindKey(['meta+a', 'ctrl+a'], () => {
    const nodes = graph.getNodes();
    if (nodes) {
      graph.select(nodes);
    }
  });
  //delete
  /*
    graph.bindKey('delete', () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.removeCells(cells)
      }
    })
    */
  // zoom
  graph.bindKey(['ctrl+1', 'meta+1'], () => {
    const zoom = graph.zoom();
    if (zoom < 1.5) {
      graph.zoom(0.1);
    }
  });
  graph.bindKey(['ctrl+2', 'meta+2'], () => {
    const zoom = graph.zoom();
    if (zoom > 0.5) {
      graph.zoom(-0.1);
    }
  });
  return graph;
};
